<template>
  <div>
    <shopheader></shopheader>
    <div class="search">
      <div>
        <input type="text" :value="searchkey" />
        <button class="search_icon">搜索</button>
      </div>
    </div>
    <div class="gd">
      <div v-for="(item, index) in message" :key="index">
        <div class="goods" @click="goToProduct(message, index)">
          <img :src="message[index].pic" alt="" />
          <p>{{ item.name }} -{{ index }}</p>
          <p>￥{{item.price}}</p>
        </div>
      </div>
    </div>
    <hr/>
    <web-infor></web-infor>
  </div>
</template>

<script>
import WebInfor from '../components/Goods/WebInfor.vue'
import Shopheader from '../components/Shopheader.vue'
export default {
  components: { Shopheader, WebInfor },
  data () {
    return {
      searchkey: '',
      message: [
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' }
      ]
    }
  },
  methods: {
    goToProduct () {
      this.goToProduct = this.$goProdct
      console.log('传参')
    }
  },
  beforeMount () {
    this.searchkey = this.$route.params.key
    console.log(this.searchkey)
  },
  mounted () {
    console.log(this.searchkey)
    if (this.searchkey !== '') {
      this.$axios.get('/pms/product/1/10', {
        headers: {
          authorization: sessionStorage.getItem('token')
        },
        params: {
          publishStatus: '',
          verifyStatus: '',
          key: this.searchkey
        }
      }
      ).then((res) => {
        // console.log(res.data)
        this.message = res.data.data.records
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.gd {
  display: flex;
  flex-flow: row wrap;
  // justify-content: space-between;
  padding: 0 10px 10px;
  width: 89vw;
  margin:  0 auto 70px;
  border: 1px solid  rgb(210, 210, 218);
  border-radius: 20px;
//   background: darkblue;
  .goods {
    margin: 0 14px;
    width: 240px;
    height: 300px;
    box-shadow: 1px 1px 1px 1px rgb(194, 194, 194);
    background-color: white;
    margin-top: 15px;
    // border: 1px solid rgba(180, 178, 178, 0.621);
    img {
      width: 170px;
      height: 170px;
      margin: 15px 25px;
    }
    p {
      width: 160px;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 35px;
    }
    :last-child{
      font-size: 20px;
      color: red;
      margin-top: 20px;
    }
  }
}

.search {
  width: 100%;
  height: 100px;
//   background-color: darkgoldenrod;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  input {
    padding: 0 20px;
    width: 40vw;
    height: 40px;
    border-radius: 20px;
    border: 0px;
    margin: auto;
  }
  .search_icon {
    display: inline-block;
    border-radius: 20px;
    background-color: rgba(206, 196, 171, 0.639);
    border: 0px;
    width: 80px;
    height: 40px;
    position: relative;
    left: -77px;
  }
}
</style>
